<template>
  <el-dialog
    slot="—"
    :title="title"
    :width="width"
    :visible.sync="showMapComponent"
    top="5vh"
    custom-class="amap-map"
    @close="cancel"
    :close-on-click-modal="false"
    :modal-append-to-body="false"
  >
    <el-amap-search-box
      class="search-box"
      :search-option="searchOption"
      :on-search-result="onSearchResult"
    ></el-amap-search-box>
    <el-amap
      class="amap-box"
      :zoom="zoom"
      :events="events"
      :center="center"
      :mapStyle="mapStyle"
    >
      <el-row class="el-row-x" :gutter="10" style="float: right">
        <el-col :span="10">
          <el-input
            size="small"
            type="text"
            v-model="Pkeyword"
            placeholder="地址"
          ></el-input>
        </el-col>
        <el-col :span="4">
          <el-input
            size="small"
            type="text"
            v-model="lng"
            placeholder="经度"
          ></el-input>
        </el-col>
        <el-col :span="4">
          <el-input size="small" v-model="lat" placeholder="纬度"></el-input>
        </el-col>
        <el-col :span="2">
          <el-button
            type="primary"
            style="width: 131px; height: 31px"
            @click="confirm"
            >确定</el-button
          >
        </el-col>
      </el-row>
      <el-amap-marker
        v-for="marker in markers"
        :position="marker.position"
        :key="marker.id"
      ></el-amap-marker>
    </el-amap>
  </el-dialog>
</template>
<script>
export default {
  props: {
    // 在子组件中使用 props 选项去接收来自父组件传递过来的数据
    dialogVisible: Boolean,
    mapHeight: {
      type: Number,
      default: 500,
    },
    title: {
      type: String,
      default: "地图选址",
    },
    width: {
      type: [Number, String],
      default: "80%",
    },
    height: {
      type: [Number, String],
      default: "80%",
    },
  },
  data() {
    let that = this;
    return {
      Pkeyword: "",
      showMapComponent: this.dialogVisible,
      keyword: "", // 地区搜索的信息
      center: [118.802, 32.064],
      zoom: 16,
      mapStyle: "amap://styles/8b6be8ec497009e17a708205348b899a", //设置地图样式
      markers: [],
      windows: [],
      searchOption: {},
      lng: "", //经度
      lat: "", // 纬度
      events: {
        click(e) {
          that.markers = [];
          let { lng, lat } = e.lnglat;
          that.lng = lng;
          that.lat = lat;
          var geocoder = new AMap.Geocoder({
            radius: 1000,
            extensions: "all",
          });
          let obj = {
            position: [lng, lat],
          };
          that.markers.push(obj);
          geocoder.getAddress([lng, lat], function (status, result) {
            if (status === "complete" && result.info === "OK") {
              if (result && result.regeocode) {

                that.Pkeyword = result.regeocode.formattedAddress;
                that.$nextTick();
              }
            }
          });
        },
      },
    };
  },
  watch: {
    dialogVisible: function (currentValue) {
      this.showMapComponent = currentValue;
      if (currentValue) {
        this.keyword = "";
      }
    },
  },
  mounted() {
    // this.point();
  },
  beforeDestroy() {
    this.$parent.sign = true;
    this.$parent.mapSign = true;
  },
  methods: {
    open(center) {
      
      this.showMapComponent = true;
      this.center = [center.lng, center.lat];
      let obj = {
        position: [center.lng, center.lat],
      };
      this.markers.push(obj);
    },
    onSearchResult(pois) {
      let latSum = 0;
      let lngSum = 0;
      if (pois.length > 0) {
        pois.forEach((poi) => {
          let { lng, lat } = poi;
          lngSum += lng;
          latSum += lat;
          this.markers.push({
            position: [poi.lng, poi.lat],
          });
        });
        let center = {
          lng: lngSum / pois.length,
          lat: latSum / pois.length,
        };
        this.center = [center.lng, center.lat];
      }
    },
    close() {
      this.showMapComponent = false;
    },
    cancel: function () {
      this.showMapComponent = false;
      this.$parent.sign = false;
      this.$parent.mapSign = false;
    },
    confirm() {
      let addrInfo = {
        lng: this.lng,
        lat: this.lat,
        Pkeyword: this.Pkeyword,
      };
      this.$emit("map-confirm", addrInfo);
      this.showMapComponent = false;
    },
  },
};
</script>
<style lang="scss">
.amap-map {
  .el-dialog__body {
    padding: 5px !important;
    position: relative;
  }
  .el-vue-amap-container {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  .el-row-x {
    position: absolute;
    top: 0;
    right: 0;
    margin-bottom: 7px;
    margin-top: -45px;
    margin-right: -45px !important;
  }
  .el-dialog__body {
    height: 505px;
  }
  .el-input.is-disabled .el-input__inner {
    color: #303133;
  }
}
</style>